<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <!--<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">-->
    <script src="bootstrap/js/jquery-3.2.1.min.js"></script>
    <!--<script src="bootstrap/js/bootstrap.min.js"></script>-->

    <style>
        .shange{
            width: 70%;
            position: relative;
            left: 15%;
        }
        li{list-style: none;}
        .yejilan{
            width: 70%;
            position: relative;
            left: 15%;
        }
        .yeji ul{
            border: green 1px dashed;
            border-radius: 10px;
            width: 100%;
        }
        .yeji ul li{
            font-size: 17px;
            margin: 5px;
        }
        .zhongjiantu{
            width: 100%;
            margin-top:40px ;
        }
        .zhongjiantu img{
            width: 100%;
        }
        .dingzhi{
            width: 70%;
            position: relative;
            left: 15%;
        }
        .dingzhi div img{
            width:100%;
            margin:2px;
        }
        .djyy{
            margin-top:40px ;
            background: forestgreen;
            width: 20%;
            position: relative;
            left: 40%;
            font-size: 30px;
            border-radius: 5px;
            color: white;
            text-align: center;
        }
        .djyy:hover{
            cursor: pointer;
            color: blue;
        }
        /*.dw{margin-top: 40px}*/
        .dw li{margin-top: 10px}
        .all{position:relative}
        .wei{width: 100%;height: 300px;}

        p{
            max-font-size: 60px;
            min-font-size: 25px;
        }
        #content{
            position: relative;
        }

    </style>
</head>
<body>
<div class="all">
    <div id="head">

    </div>
    <script>
        $("#head").load("head.html");
    </script>

    <div id="content">

        <div>
            <p class="col-sm-12 col-md-12" style="width:100%;opacity: 0.4; text-align: center;font-weight:100;font-size:40px;color: #14408667;position: absolute;z-index: 0.1;">DECORATION &nbsp;STYLE</p>
            <h1 class="col-sm-12 col-md-12"  style="text-align: center;height: 100px;line-height: 100px;font-size: 40px;position: relative;">装修风格</h1>

            <div  class="shange">
                <div class="row">
                    <div class="col-sm-12 col-md-3">
                        <a href="#" class="thumbnail">
                            <img src="images/网站首页/网站首页_05.png"
                                 alt="">
                        </a>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <a href="#" class="thumbnail">
                            <img src="images/网站首页/网站首页_07.png"
                                 alt="">
                        </a>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <a href="#" class="thumbnail">
                            <img src="images/网站首页/网站首页_09.png"
                                 alt="">
                        </a>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <a href="#" class="thumbnail">
                            <img src="images/网站首页/网站首页_11.png"
                                 alt="">
                        </a>
                    </div>
                </div>

            </div>
        </div>

        <div class="yejilan">
            <p class="col-sm-12 col-md-12"  style="width:100%;opacity: 0.4; text-align: center;font-weight:100;font-size:40px;color: #14408667;position: absolute;z-index: 0.1;">COMPANY &nbsp;DYNAMIC</p>
            <h1  class="col-sm-12 col-md-12" style="position:relative; text-align: center;height: 100px;line-height: 100px;font-size: 40px;">公司动态</h1>
            <div class="row">
                <div class="col-sm-12 col-md-6">
                    <a href="#" class="thumbnail">
                        <img src="images/网站首页/网站首页_18.png"
                             alt="">
                    </a>
                </div>
                <div class="col-sm-12 col-md-6">

                    <div class="yeji" style="width:100%;">
                        <ul>
                            <li>森语家居2018年第一季度业绩</li>
                            <li>森语家居2017年第四季度及全年业绩</li>
                            <li>森语家居2017年第三季度业绩</li>
                        </ul>
                        <ul>
                            <li>森语家居2017年第二季度及中期业绩</li>
                            <li>森语家居2017年第一季度业绩</li>
                            <li>森语家居2016年第四季度及全年业绩</li>
                        </ul>
                        <ul>
                            <li>森语家居2016年第三季度业绩</li>
                            <li>森时甜品与森语家居续签大陆战略合作协议</li>
                            <li>森语家居2016年第二季度及中期业绩</li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

        <div class="zhongjiantu">
            <img src="images/网站首页/网站首页_21.png" alt="">
        </div>

        <div class="dingzhi">
            <p class="col-sm-12 col-md-12"  style="width:100%;opacity: 0.4; text-align: center;font-weight:100;font-size:40px;color: #14408667;position:  absolute;z-index: 0.1;">CUSTOM  FURNITURE</p>
            <h1 class="col-sm-12 col-md-12"  style="position: relative; text-align: center;height: 100px;line-height: 100px;font-size: 40px;">定制家具</h1>
            <div class="row" >
                <div class="col-sm-12 col-md-6">
                    <!--<a href="#" class="thumbnail">-->
                    <div >
                        <img src="images/网站首页/网站首页_24.png" alt="">
                        <img src="images/网站首页/网站首页_30.png" alt="">
                    </div>
                    <!--</a>-->
                </div>

                <div class="col-sm-12 col-md-6" >
                    <!--<a href="#" class="thumbnail">-->
                    <img  src="images/网站首页/网站首页_26.png"
                          alt="">
                    <!--</a>-->
                </div>

            </div>
            <div class="djyy">点击预约</div>
        </div>

        <div>
            <p class="col-sm-12 col-md-12"  style="width:100%; opacity: 0.4; text-align: center;font-weight:100;font-size:40px;color: #14408667;position: absolute;z-index: 0.1;">PRODUCT &nbsp;SERVICE</p>
            <h1 class="col-sm-12 col-md-12"  style="position: relative; text-align: center;height: 100px;line-height: 100px;font-size: 40px;">产品服务</h1>
            <div  class="shange">
                <div class="row">
                    <div class="col-sm-12 col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="images/网站首页/网站首页_33.png"
                                 alt="">
                        </a>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="images/网站首页/网站首页_35.png"
                                 alt="">
                        </a>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="images/网站首页/网站首页_37.png"
                                 alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div  class="shange">
            <div class="row">
                <div class="col-sm-12 col-md-6">
                    <a href="#" class="thumbnail">
                        <img src="images/网站首页/网站首页_43.png"
                             alt="">
                    </a>
                </div>
                <div class="col-sm-12 col-md-6">
                    <div style="background-image: url('images/网站首页/网站首页_03.png')">
                        <ul class="dw" >
                            <li><img src="images/网站首页/12.png" alt="">&nbsp;&nbsp;&nbsp;<span style="font-size: 23px;font-weight: bold">查找门店</span></li>
                            <li >
                                <select class="se1" id="province" style="width: 30%" onchange="change(this.value)"  >
                                    <option value="0">选择省份</option>
                                    <option value="1">山东</option>
                                    <option value="2">安徽</option>
                                    <option value="3">湖北</option>
                                    <option value="4">浙江</option>
                                    <option value="5">广东</option>
                                </select>
                                <select class="se2" id="city" style="width: 30%">
                                <option value="0">请选择城市</option>
                            </select>
                                <input type="button" style="background: green;color: white" value="选择门店">
                            </li>
                            <li>地址：苏州市工业园区苏州大道东71号</li>
                            <li>森与家居装饰工程有限公司</li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

    </div>
<div class="wei" ></div>
</div>


<script>

      var  h = document.documentElement.clientWidth;
      var w=document.getElementsByClassName("wei")[0];
     $(window).resize(function(){
         $(window).width()<750?$(".wei").css("height","700"):$(".wei").css("height","300")
     });


     var citys = new Array();
     citys[0]=new Array("请选择城市");
     citys[1]=new Array("济南","青岛","烟台","济宁","德州","莱芜");
     citys[2]=new Array("安庆","阜阳","合肥","马鞍山","芜湖");
     citys[3]=new Array("武汉","十堰","黄冈","襄阳");
     citys[4]=new Array("杭州","宁波","义乌","金华");
     citys[5]=new Array("潮州","佛山","广州");
     function change(value){
         document.getElementById("city").options.length=0;
         for(
             var m =0 ;m<citys[value].length;m++){
             var opt=document.createElement("option");
             var node=document.createTextNode(citys[value][m]+"");
             opt.appendChild(node);
             document.getElementById("city").appendChild(opt);


         }
     }

   // $(function ax() {
   //     var W_width=parseInt($(window).width());
   //     if(W_width>=1000){
   //         $(".wei").css("height","300px");
   //     }else {
   //         $(".wei").css("height","700px");
   //     }
   // })
   //   window.onresize= ax();
   //
</script>

</body>
</html>